<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
	<title>TASK TWO</title>
	<link rel="stylesheet" type="text/css" href="style/task1_2.css">
</head>
<body>
<!--Header-->
<header>
	<div id="header-logo">
		<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="到百度首页" title="到百度首页">
	</div>
	<div id="nav">
	<ul>
		<li><a href="#">导航链接一</a></li>
		<li><a href="#">导航链接二</a></li>
		<li><a href="#">导航链接三</a></li>
		<li><a href="#">导航链接四</a></li>
	</ul>	
	</div>
</header>
<!--主体-->
<main id="content">
	<div class="article">
		<h2>文章一级标题</h2>
		<h3>文章二级标题</h3>
		<p class="article-info">作者：xx&nbsp;2016年5月5日</p>
		<p>这是一个很长的段落,ddddddddddddddddddddd
		dsaddsad,换行了</br>
		这是一个很长段落，<strong>这里有个粗字体</strong> 换行了
		这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到段落</a>这是一个段落
		</p>	
		<img src="http://www.baidu.com/img/2016_4_26logo_843a64cc86a54b8da14d7e9baad4d15f.gif">
		<p>这是一个很长的段落,ddddddddddddddddddddd
		dsaddsad,换行了</br>
		这是一个很长段落，<strong>这里有个粗字体</strong> 换行了
		这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到段落</a>这是一个段落。
	</div>

	<div class="article">
		<h2>另一篇文章一级标题</h2>
		<h3>文章二级标题</h3>
		<p class="article-info">作者：xx&nbsp;时间：2016年5月5日</p>
		<p>这是一个很长很长的段落，。。。。。。。。。。。。。。。。。。，这是一个很长的段落
		换行了<br \>
		这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到段落</a>这是一个段落</p>
		<img src="http://www.baidu.com/img/2016_4_26logo_843a64cc86a54b8da14d7e9baad4d15f.gif">
		<ul>
			<li>列表项目一</li>
			<li>列表项目二</li>	
		</ul>
	</div>

	<div class="article">
	<h2>图片</h2>
		<div class="picture">
			<p>好看的图片</p><img src="http://www.baidu.com/img/2016_4_26logo_843a64cc86a54b8da14d7e9baad4d15f.gif">
		</div>
		<div class="picture">
			<p>好看的图片</p><img src="http://www.baidu.com/img/2016_4_26logo_843a64cc86a54b8da14d7e9baad4d15f.gif">
		</div>
		<div class="picture">
			<p>好看的图片</p><img src="http://www.baidu.com/img/2016_4_26logo_843a64cc86a54b8da14d7e9baad4d15f.gif">
		</div>
	</div>

	<div class="article">
		<h2>最后一篇文章一级标题</h2>
		<h3>文章二级标题</h3>
		<p class="article-info"><span>作者</span>&nbsp;<span>文章发表时间</span></p>
		<ol>
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol>
		<p>下面是一个表格,我在表格</p>
		<table border="1">
			<tr>
				<th>表头</th>
				<th>表头</th>
				<th>表头</th>
			</tr>
			<tr>
				<td>表内容单元格</td>
				<td>表内容单元格</td>
				<td><a href="http://www.baidu.com">操作</a></td>
			</tr>
			<tr>
				<td>表内容单元格</td>
				<td>表内容单元格</td>
				<td><a href="http://www.baidu.com">操作</a></td>
			</tr>
			<tr class="tablesum">
				<td>总计</td>
				<td colspan="2">1000</td>
			</tr>
		</table>
	</div>

	<div class="article">
	<div class="sidebar">
		<h2>这里以后是一个侧栏,这是侧栏的标题</h2>
		<form action="#" method="">
			
			<div class="inputid">
				<label for="email">请输入邮箱地址</label>
				<input type="text" name="mail" value="这是一个文本输入框" />
				<p>邮箱地址请按照要求格式输入</p>
			</div>
			
			<div class="inputid">
				<label for="pwd">请输入密码</label>
				<input type="password" name="password" />
				<P></P>
				<label>请重复输入密码</label>
				<input type="password" name="password_dul" />
				<p>密码请为6-16位英文数字</p>
			</div>
			
			<div class="inputid">
		    	<lable for="">性别</lable>
		    	<input type="radio" checked="checked" name="sex" value="男" />男
		        <input type="radio" name="sex" value="女" />女
		    </div>
		    <div class="inputid">
		    	<label for="seletctItem">城市</label>
			    <select  name="city">
			    	<option value="北京" selected="selected">北京</option>
			    	<option value="长沙">长沙</option>
			    	<option value="株洲">株洲</option>
			    	<option value="东京">东京</option>
			    </select>
			</div>
			<div class="inputid">
				<label for="hobby">爱好</label>
				<input type="checkbox" name="excise">运动</input>
				<input type="checkbox" name="art">艺术</input>
				<input type="checkbox" name="sciense">科学</input>
			</div>
			<div class="inputid">
				<label for="self-describe">个人描述</label>
		    	<textarea rows="10" cols="50">这是一个多行输入框，输入您的个人描述</textarea>
		    </div>
		    <input type="submit" name="submit" value="确认提交"></input>
		</form>
		</div>
	</div>
</main>
<!--这里是页脚-->
<footer>
		<div class="copy">版权所有</div>
</footer>
</body>
</html>